<template>
	<view class="popup flex_c">

		<view class="nav">
			<view class="close" @click="$native.backAction()">
				<u-icon name="close-circle" color="#FFF" size="44rpx"></u-icon>
			</view>
		</view>

		<view class="nav_box"></view>

		<view class="popup_title">活动规则</view>
		<view class="list">
			<view class="item flex_center">
				<view class="index">1</view>
				<text>惊喜礼物是超圈的趣味玩法，用户在赠送惊喜礼物时将礼物分成5个级别盒子，每个盒子装有不同级别的礼物，用户从中盲选一个送给选中的主播。</text>
			</view>

			<view class="item flex_center">
				<view class="index">2</view>
				<text>礼物价值，同一个礼物放在不同级别的盒子中，价值不同，具体价值如下：</text>
			</view>

			<view class="item item_text flex_center">
				<view class="index no"></view>
				<text>A级盒原礼物的10%</text>
			</view>

			<view class="item item_text flex_center">
				<view class="index no"></view>
				<text>B级盒原礼物的50%</text>
			</view>

			<view class="item item_text flex_center">
				<view class="index no"></view>
				<text>C级盒原礼物的70%</text>
			</view>

			<view class="item item_text flex_center">
				<view class="index no"></view>
				<text>D级盒原礼物的110%</text>
			</view>

			<view class="item item_text flex_center">
				<view class="index no"></view>
				<text>E级盒原礼物的500%</text>
			</view>

			<view class="item item_text flex_center">
				<view class="index no"></view>
				<text>F级盒原礼物的1000%</text>
			</view>

			<view class="item flex_center">
				<view class="index">3</view>
				<text>中奖概率如下</text>
			</view>

			<view class="item item_text flex_center">
				<view class="index no"></view>
				<text>A级盒：35.2%</text>
			</view>

			<view class="item item_text flex_center">
				<view class="index no"></view>
				<text>B级盒：24.7%</text>
			</view>

			<view class="item item_text flex_center">
				<view class="index no"></view>
				<text>C级盒：18%</text>
			</view>

			<view class="item item_text flex_center">
				<view class="index no"></view>
				<text>D级盒：17%</text>
			</view>

			<view class="item item_text flex_center">
				<view class="index no"></view>
				<text>E级盒：3.1%</text>
			</view>

			<view class="item item_text flex_center">
				<view class="index no"></view>
				<text>F级盒：2%</text>
			</view>

			<view class="item flex_center">
				<view class="index">4</view>
				<text>不同级别盒子重新洗牌后，用户开启，即直接送给所选择的人。同时增加用户在本平台的实力值。</text>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="less" scoped>
	
	
	.nav {
		padding: var(--paging-head-top) 0 0;
		height: calc(44px + var(--paging-head-top));
		width: 100vw;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		
		.close {
			padding: 16rpx 32rpx;
		}
	}
	
	.popup {
		width: 100vw;
		min-height: 100vh;
		background: linear-gradient(136deg, #4E78CC 0%, #353AB6 55%, #6212BC 100%);
		padding: 0 0 84rpx;

		.popup_title {
			color: transparent;
			background-image: linear-gradient(34deg, #C3D8FF 0%, #F3DEF8 55%, #B994FF 100%);
			background-clip: text;
			font-size: 48rpx;
			line-height: 58rpx;
			font-weight: 600;
			margin-bottom: 20rpx;
		}

		.list {
			padding: 0 48rpx;

			.item_text {
				margin-top: 10rpx !important;
			}

			.item {
				margin-top: 40rpx;
				align-items: flex-start;

				.index {
					width: 48rpx;
					height: 48rpx;
					border-radius: 24rpx;
					background: linear-gradient(117deg, #B9D2FE 0%, #F3DEF8 55%, #9C7ADB 100%);
					font-weight: 600;
					font-size: 36rpx;
					color: #6602D1;
					line-height: 48rpx;
					text-align: center;
					margin-right: 18rpx;
					flex-shrink: 0;
				}

				.no {
					background: transparent;
				}

				text {
					font-size: 32rpx;
					color: #FFFFFF;
					line-height: 44rpx;
				}
			}
		}

		.popup_text {
			color: transparent;
			background-image: linear-gradient(34deg, #B994FF 0%, #F3DEF8 55%, #C3D8FF 100%);
			background-clip: text;
			font-size: 32rpx;
			font-weight: 600;
			margin-bottom: 50rpx;
		}

		.btn {
			view {
				width: 248rpx;
				height: 88rpx;
				border-radius: 44rpx;
				font-size: 28rpx;
				line-height: 88rpx;
				text-align: center;
			}

			.btn1 {
				background: #F1F1F1;
				color: #333333;
			}

			.btn2 {
				background: #FD2A53;
				color: #FFF;
				margin-left: 24rpx;
			}
		}
	}
</style>